<template>
  <div class="leftTreeBox">
    <div class="leftTreeTitle">
      <a-icon type="menu"/>
      <span>&nbsp;选择区域</span>
    </div>
    <div class="leftTreeContent">
      <a-input-search style="margin-bottom: 8px" placeholder="请输入行政区名称" @change="onChange"/>
      <a-tree
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :tree-data="cityData"
          :replaceFields="{ key: 'id' , title: 'cityName' }"
          :show-line="true"
          @select="onTreeChange"
          @expand="onExpand"
      >
        <template slot="title" slot-scope="{ cityName }">
        <span v-if="cityName.indexOf(searchValue) > -1">{{ cityName.substr(0, cityName.indexOf(searchValue)) }}<span
            style="color: #f50">{{
            searchValue
          }}</span>{{ cityName.substr(cityName.indexOf(searchValue) + searchValue.length) }}
        </span>
          <span v-else>{{ cityName }}</span>
        </template>
      </a-tree>
    </div>

  </div>
</template>

<script>
import MapUtils from "../js/mapUtil/MapUtils"
import Bus from "@/utils/bus";

export default {
  name: "MapLeftTree",
  data() {
    return {
      cityData: [
        {
          id: "110000",
          cityCode: "110000",
          cityName: "北京",
          depth: 1,
          isUse: 1,
          longitude: "116.453812052846",
          latitude: "40.1369707784499",
          parentId: "",
          mergerName: "中国，北京",
          pinyin: "beijing",
          shortName: "北京",
          zipCode: "",
          children: [
            {
              id: "110001",
              cityCode: "",
              cityName: "北京市",
              depth: 2,
              isUse: 1,
              longitude: "116.453812052846",
              latitude: "40.1369707784499",
              parentId: "110000",
              mergerName: "中国，北京，北京市",
              pinyin: "beijing",
              shortName: "北京",
              zipCode: "",
            }
          ]
        },
        {
          id: "120000",
          cityCode: "120000",
          cityName: "天津",
          depth: 1,
          isUse: 1,
          longitude: "117.207263",
          latitude: "39.119803",
          parentId: "",
          mergerName: "中国，天津",
          pinyin: "tianjin",
          shortName: "天津",
          zipCode: "",
          children: [
            {
              id: "120001",
              cityCode: "",
              cityName: "天津市",
              depth: 2,
              isUse: 1,
              longitude: "117.207263",
              latitude: "39.119803",
              parentId: "120000",
              mergerName: "中国，天津,天津市",
              pinyin: "tianjin",
              shortName: "天津",
              zipCode: "",
            }
          ]
        },
        {
          id: "130000",
          cityCode: "",
          cityName: "河北省",
          depth: 1,
          isUse: 1,
          longitude: "114.463618",
          latitude: "38.035228",
          parentId: "",
          mergerName: "中国，河北省",
          pinyin: "hebei",
          shortName: "河北",
          zipCode: "",
          children: [
            {
              id: "130100",
              cityCode: "130100",
              cityName: "石家庄市",
              depth: 2,
              isUse: 1,
              longitude: "114.502461",
              latitude: "38.045474",
              parentId: "130000",
              mergerName: "中国，河北省，石家庄市",
              pinyin: "shijiazhuang",
              shortName: "石家庄",
              zipCode: "",
            },
            {
              id: "130200",
              cityCode: "130200",
              cityName: "唐山市",
              depth: 2,
              isUse: 1,
              longitude: "118.175393",
              latitude: "39.635113",
              parentId: "130000",
              mergerName: "中国，河北省，唐山市",
              pinyin: "tangshan",
              shortName: "唐山",
              zipCode: "",
            },
            {
              id: "130300",
              cityCode: "130300",
              cityName: "秦皇岛市",
              depth: 2,
              isUse: 1,
              longitude: "119.586579",
              latitude: "39.942531",
              parentId: "130000",
              mergerName: "中国，河北省，秦皇岛市",
              pinyin: "qinhuangdao",
              shortName: "秦皇岛",
              zipCode: "",
            },
            {
              id: "130400",
              cityCode: "130400",
              cityName: "邯郸市",
              depth: 2,
              isUse: 1,
              longitude: "114.490686",
              latitude: "36.612273",
              parentId: "130000",
              mergerName: "中国，河北省，邯郸市",
              pinyin: "handan",
              shortName: "邯郸",
              zipCode: "",
            },
            {
              id: "130500",
              cityCode: "130500",
              cityName: "邢台市",
              depth: 2,
              isUse: 1,
              longitude: "114.508851",
              latitude: "37.0682",
              parentId: "130000",
              mergerName: "中国，河北省，邢台市",
              pinyin: "xingtai",
              shortName: "邢台",
              zipCode: "",
            },
          ]
        },
      ],//城市数据
      dataList: [],
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      filterTreeNode: true
    }
  },
  methods: {
    onTreeChange(selectedKeys, e) {
      Bus.$emit('clearProject')
      MapUtils.removePoi()
      if (!selectedKeys||selectedKeys.length===0) {
        return
      }
      let selectedCity = this.dataList.filter(item => item.id === selectedKeys[0])[0]
      let zLevel = undefined
      if (!selectedCity) {
        return
      } else {
        switch (selectedCity.depth) {
          case 1://省
            zLevel = 6
            break;
          case 2://市
            zLevel = 8
            break;
          case 3://县
            zLevel = 10
            break;
          default://全国
            zLevel = 4
            break;
        }
      }
      let poiPoint = {
        lon: selectedCity.longitude,
        lat: selectedCity.latitude,
        name: selectedCity.cityName,
      }
      //地图定位
      MapUtils.locatePoi(poiPoint, zLevel)

    },
    onChange(e) {
      const value = e.target.value;
      const expandedKeys = this.dataList
          .map(item => {
            if (item.cityName.indexOf(value) > -1) {
              return this.getParentKey(item.id, this.cityData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
      this.expandedKeys = expandedKeys;
      this.searchValue = value;
      this.autoExpandParent = true;
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    getParentKey(key, tree) {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some(item => item.id === key)) {
            parentKey = node.id;
          } else if (this.getParentKey(node.id, node.children)) {
            parentKey = this.getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    },
    treeToList(treeData) {
      let list = [];
      for (let i = 0; i < treeData.length; i++) {
        let node = treeData[i];
        list.push({
          id: node.id,
          cityCode: node.cityCode,
          cityName: node.cityName,
          depth: node.depth,
          isUse: node.isUse,
          longitude: node.longitude,
          latitude: node.latitude,
          parentId: node.parentId,
          mergerName: node.mergerName,
          pinyin: node.pinyin,
          shortName: node.shortName,
          zipCode: node.zipCode,
        });
        if (node.children && node.children.length > 0) {
          let childrenList = this.treeToList(node.children);
          list = list.concat(childrenList);
        }
      }
      return list;
    },
  },
  mounted() {
    //TODO 接口获取城市数据
    this.dataList = this.treeToList(this.cityData);
  },
  destroyed() {
    MapUtils.removePoi();
  },
}
</script>

<style scoped lang="less">
.leftTreeBox {
  position: absolute;
  width: 220px;
  height: calc(100% - 60px);
  top: 20px;
  left: 20px;
  background-color: #fff;

  .leftTreeTitle {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    border-bottom: 1px solid #ccc;
    background: #373737;
    padding-left: 10px;
  }

  .leftTreeContent {
    padding: 10px;
  }
}

</style>
